<template>
  <div class="nav">
    <div class="logo">
      <img src="@img/home/圣诺莉官网—首页_01-03.png" alt="" />
    </div>
    <div class="nav-list">
      <div
        class="list-item"
        v-for="(item, index) in tabList"
        :key="index"
        @click="toRouter(item)"
      >
        <div class="item-title">{{ item.title }}</div>
        <div class="item-english">{{ item.english }}</div>
      </div>
    </div>
    <div class="phone">
      <img src="@img/phone.png" alt="" />
      <div>187 2166 5379</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabList: [
        { title: "首页", path: "/index", english: "HOME" },
        { title: "婚宴场馆", path: "/venue", english: "WEDDING VENUES" },
        {
          title: "婚礼客片",
          path: "/guest",
          english: "WEDDING GUEST FILM",
        },

        {
          title: "城市",
          path: "/city",
          english: "CITY",
        },
        {
          title: "优惠活动",
          english: "PROMOTIONE",
          path: "/promotion",
        },
        {
          title: "宴会",
          english: "BANQUET",
          path: "/banquet",
        },
        {
          title: "预约看店",
          english: "RESEVATION",
          path: "/reservation",
        },
        {
          title: "关于我们",
          english: "ABOUT US",
          path: "/about",
        },
      ],
    };
  },
  methods: {
    toRouter(item) {
      this.$router.push(item.path);
    },
  },
};
</script>

<style lang="less">
@import url("@css/index.less");
.nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-bottom: 10px;
  box-shadow: 0px 12px 8px -12px rgba(0, 0, 0, 0.2);
  padding-bottom: 20px;
  max-width: 1920px;
  min-width: 1024px;
}
.nav-list {
  display: flex;
  align-items: center;
  margin: 0 20px;
  .list-item {
    border-right: 2px solid @color;
    padding: 0 10px;
    .item-title {
    }
    .item-english {
      color: @color;
    }
  }
}
.phone {
  display: flex;
  align-items: center;
  color: @color;
  font-size: 20px;
  font-weight: 600;
  flex-wrap: nowrap;
  img {
    width: 30px;
    height: 30px;
  }
}
</style>
